{layout name="../../admin/view/layout/main" /}
{:breadcrumb(['系统管理:system/user/index', '登录日志'])}
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-body">
                <!-- search -->
                <div class="card-search mb-2-5">
                    <form class="row g-3" onsubmit="return false;" id="search-form">
                        <div class="col-auto">
                          <input type="text" class="form-control" autocomplete="off" name="username" placeholder="登录账号">
                        </div>
                        <div class="col-auto">
                            <input type="text" class="form-control" autocomplete="off" name="ip" placeholder="IP">
                          </div>
                          <div class="col-auto">
                            <div class="input-group">
                              <span class="input-group-text">从</span>
                              <input type="text" name="start" autocomplete="off" class="form-control" data-provide="datepicker" style="width: 120px;">
                              <span class="input-group-text">至</span>
                              <input type="text" name="end" autocomplete="off" class="form-control" data-provide="datepicker" style="width: 120px;">
                            </div>
                          </div>
                        <div class="col-auto">
                          <button type="submit" class="btn btn-primary" onclick="queryLog();"><span class="mdi mdi-magnify"></span> 查询</button>
                          <button type="reset" class="btn btn-default btn-light"><span class="mdi mdi-refresh"></span> 重置</button>
                        </div>
                      </form>
                  </div>
                  <!-- end search-->

                  <div id="toolbar" class="toolbar-btn-action">
                    <button type="button" class="btn btn-danger me-1 btn-sm" onclick="emptyAll();">
                      <span class="mdi mdi-recycle-variant"></span> 清空
                    </button>
                    <button type="button" class="btn btn-info me-1 btn-sm" onclick="exportAll();">
                      <span class="mdi mdi-export"></span> 导出
                    </button>
                  </div>
                  <table id="table"></table>

            </div>
        </div>
    </div>
</div>

<script>
  function queryLog(){
    var data = $('#search-form').serialize();
    $('#table').bootstrapTable('refresh', {
        url: "{:url('system/login/data')}?" + data,
    });
  }
  function exportAll(){
    var l = $('body').lyearloading({
        opacity: 0.2,
        spinnerSize: 'lg'
    });
    var data = $('#search-form').serialize();
    $.get("{:url('system/login/export')}?" + data, {}, function(res){
        l.destroy();
        layer.alert('导出成功', { icon: 'success' });
        window.location.href = res.url;
    });
  }
  function emptyAll(){
    xp_confirm("{:url('system/login/clear')}", {}, function (){
        $('#table').bootstrapTable('refresh');
    });
  }
  $(function (){
    $('#table').bootstrapTable({
          toolbar: '#toolbar',
          classes: 'table table-bordered table-hover table-striped lyear-table',
          url: "{:url('system/login/data')}",
          pagination: true,
          search: false,
          pageSize: 20,
          sidePagination: 'server',
          columns: [
              {'field': 'id', title: 'ID'},
              {'field': 'username', title: '登录账号'},
              {'field': 'ip', title: 'IP'},
              {'field': 'browser', title: '浏览器'},
              {'field': 'os', title: '操作系统'},
              {'field': 'status', title: '登录状态', formatter: function(value, item){
                return value == 1 ? `<span class="badge bg-danger">失败</span>` : `<span class="badge bg-success">成功</span>`;
              }},
              {'field': 'msg', title: '操作信息'},
              {'field': 'create_time', title: '登录时间'},
              
          ]
      });
  })
</script>